﻿@page
@model RazorStudentManager.Pages.StudentPage.IndexModel
@using X.PagedList.Mvc.Core;
@using X.PagedList.Web.Common;

<br />
<h1 class="text-info">Student List</h1>
<br />

<div class="container p-0 m-0">
    <div class="row">
        <div class="col-2">
            <a asp-page="Create" class="btn btn-primary form-control text-white">
                创建学生
            </a>
        </div>
        <form method="get" class="col-10 row">
            <div class="col-2 offset-6">
                <select class="custom-select" asp-for="ClassId" asp-items="Model.ClassList">
                    <option value="">选择班级</option>
                </select>
            </div>
            <div class="col-4">
                <div class="input-group">
                    <input class="form-control mr-sm-2" asp-for="Search" type="search" placeholder="请输入姓名查询" aria-label="Search">
                    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                </div>
            </div>
        </form>
    </div>

    <br />
    <form method="post">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th scope="col">
                        <label scope="col" asp-for="Students.FirstOrDefault().Id"></label>
                    </th>
                    <th scope="col">
                        <label scope="col" asp-for="Students.FirstOrDefault().Name"></label>
                    </th>
                    <th scope="col">
                        <label scope="col" asp-for="Students.FirstOrDefault().Age"></label>
                    </th>
                    <th scope="col">
                        <label scope="col" asp-for="Students.FirstOrDefault().Phone"></label>
                    </th>
                    <th scope="col">
                        <label scope="col" asp-for="Students.FirstOrDefault().Address"></label>
                    </th>
                    <th scope="col">
                        <label scope="col" asp-for="Students.FirstOrDefault().Gender"></label>
                    </th>
                    <th scope="col">
                        <label scope="col" asp-for="Students.FirstOrDefault().StudentClass.ClassName"></label>
                    </th>
                    <th scope="col">
                        <label scope="col">操作</label>
                    </th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model.Students)
                {
                    <tr>
                        <th scope="row">@item.Id </th>
                        <td>@item.Name</td>
                        <td>@item.Age</td>
                        <td>@item.Phone</td>
                        <td>@item.Address</td>
                        <td>@item.Gender</td>
                        <td>@item.StudentClass.ClassName</td>
                        <td>
                            <a asp-page="Edit" asp-route-id="@item.Id" class="btn btn-success btn-sm">修改</a>
                            <button asp-page-handler="Delete" asp-route-id="@item.Id" class="btn btn-danger btn-sm" onclick="return confirm('删除数据不可恢复，你确定要删除吗？')">删除</button>
                        </td>
                    </tr>
                }
            </tbody>
            <tfoot>
                <tr>
                    <td class="text-muted" colspan="4">
                        每页 @Model.Students.PageSize 条记录，本页有 @Model.Students.Count 条记录,共有 @Model.Students.TotalItemCount 条记录。
                        第 @(Model.Students.PageCount < Model.Students.PageNumber ? 0 : Model.Students.PageNumber) 页，共 @Model.Students.PageCount 页。
                        @*这个条件表达式的目的是防止出现 记录为0的情况，会出现 总页数为0，而当前是第1页的情况。*@
                    </td>
                </tr>
            </tfoot>
        </table>
        @*<nav aria-label="Page navigation example" class="col-4 offset-4">
            <ul class="pagination pagination-lg">
                    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
                    <li class="page-item"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item"><a class="page-link" href="#">Next</a></li>
              </ul>
          </nav>*@
        <nav aria-label="这是分页" class="col-4 offset-4">
            @*@if (1==1)
            {
                <p>hello</p>
            }*@
            @Html.PagedListPager(Model.Students, pageIndex => Url.Action("Index",
            new
            {
                pageIndex,
                pageSize = ViewData["PageSize"]
            }),
            new PagedListRenderOptions
            {
                LinkToFirstPageFormat = "首页",
                LinkToNextPageFormat = ">",
                LinkToPreviousPageFormat = "<",
                LinkToLastPageFormat = "末页",
                MaximumPageNumbersToDisplay = 5,
                DisplayItemSliceAndTotal = false,
                UlElementClasses = new[] { "pagination", "pagination-lg" },  // 为ul li a 元素添加链接，使用ContainerDivClasses = new[] { "pagination" }替换 UlElementClasses = new[] { "pagination"},也是相同的效果。也可以不要此行代码，因为Bootstrap4与3相比，ul的class名没有变化，li 元素和a 元素加了page-item和page-link的类名。
                LiElementClasses = new[] { "page-item" },
                PageClasses = new[] { "page-link" },
            })
        </nav>
    </form>
</div>